<template lang="pug">
  el-row(v-loading="loading")
    el-col(:span="24")
      .header-box
        .headImgBox
          el-avatar(:size="100" :src="info.headUrl || defaultImg")
        .info
          h2
            | {{info.name}}
            el-tag.ml5(size="medium" effect="dark") {{info.signStatus === 1 ? '已成交' :  (info.statusVal || dictFilter(info.status, 'clientStatus', 'id', 'name'))}}
          p
            span.mr20
              i.mr5(class="iconfont icon-baby c_secondary")
              | 月龄：
              b {{info.birthday | monthFilter}}
            span
              i.mr5(class="iconfont icon-zerenren c_secondary")
              | 负责人：
              b {{info.staffName}}
        .btnGroups
          el-button(size="large" round @click="() => modalHandle('clueFollow')") 跟进
          // 统一使用收费订单
          el-button(size="large" round v-if="channel === 'nicemama'" @click="() => modalHandle('addContract')") 添加合同
          el-button(size="large" round @click="() => modalHandle('clientTransfer')") 移交
          //- el-button(v-if="!(info.status === 6 || info.status === 11 )" size="large" round @click="disabled = false") 编辑
          el-button.gradientVertical(size="large" round @click="deleteHandle") 删除
    el-col(:span="24")
      el-tabs.mt20(v-model="activeTab")
        el-tab-pane(label="基础信息" name="detail")
          el-row(:gutter="24")
            el-col(:span="14")
              .drawer-content(v-loading="loading")
                clue-form(ref="clueForm" inType="client" :info="info" :disabled="disabled")
              .drawer-footer.tr
                el-button.gradientVertical(v-if="!disabled" size="large" round :loading="submitting" @click="submitHandle") 确定
            el-col(:span="10")
              follow-list(:id="id" paramsKey="clientelesId" type="leadsHistoryByClient" ref="followList")
        //- el-tab-pane(label="附件" name="attachment")
        //-   attachment(:query="{clienteleId: id}")
        el-tab-pane(label="账单" name="contract")
          s-table(
            ref="table"
            reqUrl="crm/web/contract/page"
            :column="contractColumn"
            :queryPropsParams="{ clienteleId: id, areaId: curArea.areaId }"
          )
            template(slot="action" slot-scope="text, scope")
              el-link(@click="actionHandle(scope.id, 'view')" type="primary") 详情
            template(slot="payStatus" slot-scope="text, scope")
              el-tag(size="mini" :type="text | stautsFilter('type')") {{text | stautsFilter('name')}}
            <!--template(slot="beginDate" slot-scope="text, scope") {{text | dateFilter}}-->
            <!--template(slot="endDate" slot-scope="text, scope") {{text | dateFilter}}-->
            <!--template(slot="status" slot-scope="text, scope")-->
              <!--el-tag(size="mini" :type="dictFilter(text, 'contractStatus', 'id')") {{scope.statusVal}}-->
      clientTransfer(:visible.sync="modalObj.clientTransferVisible" :id="id" :info="info" @getInfo="getInfo" type="client")
      clueFollow(:visible.sync="modalObj.clueFollowVisible" :id="id" :info="info" @getInfo="getInfo" type="client")
      addContract(:visible.sync="modalObj.addContractVisible" :id="id" :info="info" @getInfo="getInfo" type="client")
      info-drawer(:visible.sync="modalObj.visible" :id="modalObj.id" :type="modalObj.type")
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import defaultImg from '@/assets/TX2.png'
import dictMixin from '@/mixins/dict'
import { clientInfo, clientDelete, clientUpdate } from '../../api'
import { contractColumn, payStatusList } from './config'
import ClueForm from '../../components/clueForm'
import Attachment from '../../components/attachment'
import ClientTransfer from '../../components/transfer'
import ClueFollow from '../../components/clueFollow'
import AddContract from '../../components/addContract'
import FollowList from '../../components/followList'
import InfoDrawer from '../../../../finance/charge/plan/infoDrawer'

export default {
  components: {
    AImage,
    ClueForm,
    Attachment,
    clientTransfer: ClientTransfer,
    clueFollow: ClueFollow,
    addContract: AddContract,
    FollowList,
    InfoDrawer
  },
  filters: {
    stautsFilter (val, key) {
      const status = payStatusList.find(x => x.id === val?.toString()) || {}
      return status[key] || ''
    }
  },
  mixins: [dictMixin],
  data () {
    return {
      defaultImg,
      loading: false,
      submitting: false,
      activeTab: 'detail',
      info: {},
      history: [],
      contractColumn,
      modalObj: {
        clientTransferVisible: false,
        clueFollowVisible: false,
        addContractVisible: false,
        visible: false
      },

      channel: process.env.VUE_APP_CHANNEL
    }
  },
  computed: {
    ...mapGetters(['curArea', 'dict']),
    id () {
      return this.$route.query.id
    },
    disabled () {
      const { info } = this
      return info.status === 6 || info.status === 11
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    strToArray (val) {
      return val ? val.split(',') : []
    },
    // 获取详情
    getInfo () {
      const { id } = this
      if (id) {
        this.loading = true
        clientInfo({ clientelesId: id }).then(res => {
          this.info = res || {}
        }).finally(() => {
          this.loading = false
        })
        this.$refs.followList && this.$refs.followList.getLeadsHistory()
      }
    },
    // 移交
    modalHandle (type) {
      this.modalObj = {
        [`${type}Visible`]: true
      }
    },
    // 删除
    deleteHandle () {
      const { id } = this
      this.$confirm('确认要删除该客户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clientDelete({ clienteleId: id }).then(() => {
          this.$message.success('删除成功')
          this.$router.go(-1)
        })
      })
    },
    // 编辑
    async submitHandle () {
      const values = await this.$refs.clueForm.submitHandle()
      this.submitting = true
      clientUpdate({
        id: this.id,
        ...values
      }).then(() => {
        this.$message.success('提交成功')
        this.getInfo()
        this.disabled = true
      }).finally(() => {
        this.submitting = false
      })
    },

    actionHandle (id, type) {
      if (type === 'view') {
        this.modalObj = {
          visible: true,
          id: id,
          type: 'contract'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header-box{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;

  .headImgBox{
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  .info {
    h2 {
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin: 0 20px 15px 0;

      ::v-deep{
        .el-tag {
          font-weight: normal;
          font-size: 15px;
          height: 25px;
          line-height: 25px;
          border: none;
          background: #2DB7F5;
          border-radius: 3px;
        }
      }
    }

    > p {
      font-size: 15px;
      font-family: PingFang SC;
      ;
      color: #666666;

      b {
        margin-left: 5px;
      }
    }
  }

  .btnGroups{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

</style>
